<%@ page language="java" import="java.util.*"
	contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html class="x-admin-sm">
<head>
<meta charset="UTF-8">
<title>家庭成员</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/font.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/front/css/index.css">
<script
	src="${pageContext.request.contextPath}/front/lib/layui/layui.js"
	charset="utf-8"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/index.js"></script>

</head>
<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">业主信息管理</a>
			<a> <cite>家庭成员信息管理</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i></a>
	</div>
	
	<xblock>
        <button class="layui-btn layui-btn-danger" onclick="delAll()">
            <i class="layui-icon">&#xe640;</i>批量删除
        </button>
        <button class="layui-btn" onclick="family_add('家庭成员添加','front-family-add.jsp','1000','600')">
            <i class="layui-icon" >&#xe608;</i>添加
        </button>
        
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th><input type="checkbox" name="" value=""></th>
            <th>姓名</th>
            <th>身份证号码</th>
            <th> 图片</th>
            <th>门牌号</th>
            <th>与户主关系</th>
            <th>电话</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="xcontent">
        <tr>
            <td><input type="checkbox" value="1" name=""></td>
            <td>张三 </td>
            <td>350322199901230512</td>
            <td ><img src="./images/tx.jpg" width="50" height="30"></td>
            <td >701</td>
            <td >户主本人</td>
            <td >110</td>
            
            <td class="td-manage">
                <a title="编辑" href="javascript:;" onclick="veh_edit('编辑','vehicle_add.html','1','1000','600')"
                   class="ml-5" style="text-decoration:none">
                    <i class="layui-icon">&#xe642;</i>
                </a>
                <a title="删除" href="javascript:;" onclick="veh_del(this,'1')"
                   style="text-decoration:none">
                    <i class="layui-icon">&#xe640;</i>
                </a>
            </td>
        </tr>
        </tbody>
    </table>
    
    
	
	
</body>
<!-- 引入JQuery -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/front/js/jquery.js"></script>

<script>
//获取前台登录对象（业主）的房号
let roomNo = "${sessionScope.ownerSession.roomNo}";

family_search();

/*家庭成员查询*/
function family_search(){
	
	$.ajax({
		async:true,
		type:"get",
		url:"${pageContext.request.contextPath}/FamilyServlet",
		data:{
			op:"list",
			roomNo:roomNo
		},
		contentType : "application/x-www-form-urlencoded",
		dataType : "json",
		success:function(result,status,xhr){
			let content="";
			
			if(result.data!=null){
				
				$.each(result.data,function(index,obj){
					
					content+=
					"<tr>"+
		           " <td><input type=\"checkbox\" value=\"1\" name=\"\"></td>"+
		           " <td>"+obj.familyName+"</td>"+
		           " <td>"+obj.familyCard+"</td>"+
		           " <td ><img onclick=\"previewImg(this)\" width=\"50\" height=\"30\" src=\"${pageContext.request.contextPath}/FileDownloadServlet?type=image&fileName="+obj.familyImage+"\"></td>"+
		           " <td >"+obj.roomNo+"</td>"+
		           " <td >"+obj.familyType.familyTypeName+"</td>"+
		           " <td >"+obj.familyPhone+"</td>"+
		            
		            "<td class=\"td-manage\">"+
		            "    <a title=\"编辑\" href=\"javascript:;\" onclick=\"family_edit('家庭成员信息修改','front-family-edit.jsp','"+obj.familyCard+"','1000','600')\""+
		            "       class=\"ml-5\" style=\"text-decoration:none\">"+
		            "        <i class=\"layui-icon\">&#xe642;</i>"+
		            "    </a>"+
		            "    <a title=\"删除\" href=\"javascript:;\" onclick=\"family_del('"+obj.familyCard+"')\""+
		            "       style=\"text-decoration:none\">"+
		            "        <i class=\"layui-icon\">&#xe640;</i>"+
		             "   </a>"+
		          "  </td>"+
		       " </tr>";
				});
			}else{
				content+="暂无数据";
			}
			//将家庭成员信息内容渲染
			$("#xcontent").html(content);
			
		}
	
	})	
};









/*家庭成员删除方法*/
function family_del(familyCard){
	layer.confirm('确认要删除吗？', {
		icon : 3,
		title : '提示信息'
	}, function(index) {
		$.getJSON("${pageContext.request.contextPath}/FamilyServlet",{op:"delete",familyCard:familyCard},function(result,status,xhr){
			if(result.data==true){
				layui.use('layer',function(){
					layer.msg(result.message,{icon:1,time:3000});
				});
				//调用查询
				family_search();
			}else{
				layui.use('layer',function(){
					layer.msg(result.message,{icon:2,time:3000});
				});
			}
		});
		
		
	});
	
	
};


	

	
</script>

<script type="text/javascript">
//预览大小根据原图的大小决定弹窗的大小
function previewImg(obj) {
	
    var img = new Image();
    img.src = obj.src;
    var height = img.height + 50; //获取图片高度
    var width = img.width; //获取图片宽度
    var imgHtml = "<img src='" + obj.src + "' width='100%' height='100%'/>";
    //弹出层
    layer.open({
        type: 1,
        shade: 0.8,
        offset: 'auto',
        area: [height + 'px', width + 'px'],
        shadeClose: true,
        scrollbar: false,
        title: "图片预览", //不显示标题  
        content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响  
        cancel: function () {
            //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });  
        }
    });
}
</script>
<script>
	layui.use([ 'laydate', 'form' ], function() {
		var laydate = layui.laydate;
		var form = layui.form;

		// 监听全选
		form.on('checkbox(checkall)', function(data) {

			if (data.elem.checked) {
				$('tbody input').prop('checked', true);
			} else {
				$('tbody input').prop('checked', false);
			}
			form.render('checkbox');
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行一个laydate实例
		laydate.render({
			elem : '#end' //指定元素
		});

	});

	/*用户-添加*/
	function family_add(title, url, id, w, h) {

		xadmin.open(title, url, id, w, h);
	}
	
	/*家庭成员编辑方法*/
	function family_edit (title,url,familyCard,w,h) {
		
	    url = url+"?familyCard="+familyCard;
	    xadmin.open(title,url,w,h);
	}

	/*用户-停用*/
	function member_stop(obj, id) {
		layer.confirm('确认要停用吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {

			if ($(obj).attr('title') == '启用') {

				//发异步把用户状态进行更改
				$(obj).attr('title', '停用')
				$(obj).find('i').html('&#xe62f;');

				$(obj).parents("tr").find(".td-status").find('span').addClass(
						'layui-btn-disabled').html('已停用');
				layer.msg('已停用!', {
					icon : 5,
					time : 1000
				});

			} else {
				$(obj).attr('title', '启用')
				$(obj).find('i').html('&#xe601;');

				$(obj).parents("tr").find(".td-status").find('span')
						.removeClass('layui-btn-disabled').html('已启用');
				layer.msg('已启用!', {
					icon : 5,
					time : 1000
				});
			}

		});
	}

	/*用户-删除*/
	function member_del(goodsId) {
		layer.confirm('确认要删除吗？', {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//请求后端控制器删除数据
			$(obj).parents("tr").remove();
			layer.msg('已删除!', {
				icon : 1,
				time : 1000
			});
		});
	}

	function delAll(argument) {
		var ids = [];

		// 获取选中的id
		$('tbody input').each(function(index, el) {
			if ($(this).prop('checked')) {
				ids.push($(this).val())
			}
		});

		layer.confirm('确认要删除吗？' + ids.toString(), {
			icon : 3,
			title : '提示信息'
		}, function(index) {
			//捉到所有被选中的，发异步进行删除
			layer.msg('删除成功', {
				icon : 1
			});
			$(".layui-form-checked").not('.header').parents('tr').remove();
		});
	}
</script>
</html>